<template>
  <div>
    <div style="margin-bottom: 16px;display: flex; justify-content: flex-end;">
      <div style="margin-left: 16px;">
        <ElDatePicker v-model="gmtCreate" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" date-format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="handleDateChange"
          clearable />
      </div>
      <ElInput :prefix-icon="Search" v-model="queryUserParams.phone" placeholder="输入手机号查询"
        style="width: 200px;margin-left: 16px;" @change="handleSearch" clearable />
    </div>
    <ReTable :data="usersList" :columns="columns" :pagination="pagination" @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
      <template #avatar="{ row }">
        <ElAvatar :src="row.avatar" />
      </template>
    </ReTable>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { queryUserList } from '@/api/user';
import ReTable from '@/components/ReTable';
import { onMounted } from 'vue';
import { ref } from 'vue';

defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "UserManage"
});

// 用户管理列表数据
const usersList = ref([])
// 分页数据
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0
})

// 表格列配置
const columns = [
  {
    label: '用户id',
    prop: 'id'
  },
  {
    label: '头像',
    prop: 'avatar',
    slotName: 'avatar'
  },
  {
    label: '昵称',
    prop: 'nickname'
  },
  {
    label: '手机号',
    prop: 'phone'
  },
  {
    label: 'openId',
    prop: 'openId'
  },
  {
    label: '创建时间',
    prop: 'gmtCreate'
  },
]
const gmtCreate = ref('')
// 查询用户参数
const queryUserParams = ref({
  phone: '',
  startTime: null,
  endTime: null,
  pageNum: 1,
  pageSize: 10
})

// 日期查询
const handleDateChange = (val: any) => {
  if (!val) {
    queryUserParams.value.startTime = null
    queryUserParams.value.endTime = null
  } else {
    queryUserParams.value.startTime = val[0] + ' 00:00:00'
    queryUserParams.value.endTime = val[1] + ' 23:59:59'
  }
  getUsersList()
}

// 搜索
const handleSearch = (val: string) => {
  queryUserParams.value.phone = val
  getUsersList()
}

// 获取用户管理列表数据
const getUsersList = () => {
  queryUserList(queryUserParams.value).then(res => {
    usersList.value = res.data.records
    pagination.value.total = res.data.total
    pagination.value.pageNum = queryUserParams.value.pageNum
    pagination.value.pageSize = queryUserParams.value.pageSize
  })
}

const handleSizeChange = (val: number) => {
  queryUserParams.value.pageSize = val
  getUsersList()
}

const handleCurrentChange = (val: number) => {
  queryUserParams.value.pageNum = val
  getUsersList()
}

onMounted(() => {
  getUsersList()
})

</script>